<template>
    <view>
        <uni-nav-bar fixed left-icon="back" title="租赁中心" :rightText="pid != 0 ? rightText : ''"  @right="clickRight"></uni-nav-bar>
	    <mSearch
			    v-if="loginWay == 1 && showTop"
			    style="position: fixed"
			    radius="0"
			    placeholder="租借人手机号"
			    border="1px #6CB041 solid"
			    searchBack="#6CB041"
			    searchColor="#fff"
			    :mode="2"
			    @search="search($event,0)"></mSearch>
        <view style="padding-bottom: 120rpx">
            <view class="ui-from" v-if="!showTop">
                <view class="check-box" v-if="pid != 0">
	                <view class="tui-flex flex">
		                <view class="flex-title">请选择类型:</view>
		                <view class="tui-flex">
			                <view class="flex-1" @tap="onLoginWay(0)">
			                    <uni-icons type="checkbox-filled" size="40" :color="loginWay == 0 ? '#6CB041': '#ccc'"></uni-icons>
				                <text class="tui-pd-left">租借</text>
			                </view>
			                <view class="flex-2" @tap="onLoginWay(1)">
				                <uni-icons type="checkbox-filled" size="40" :color="loginWay == 1 ? '#6CB041': '#ccc'"></uni-icons>
				                <text class="tui-pd-left">归还</text>
			                </view>
		                </view>
	                </view>
                </view>
	            <uni-forms v-if="loginWay == 0" :value="dataForm" ref="form" :rules="rules" err-show-type="undertext" labelWidth="210">
		            <uni-forms-item label="商家名称" required name="businName">
			            <uni-easyinput :inputBorder="false" v-model="dataForm.businName" type="text" placeholder="请输入商家名称" />
		            </uni-forms-item>
		            <uni-forms-item label="商品名称" required name="productName">
			            <uni-easyinput :inputBorder="false" v-model="dataForm.productName" type="text" placeholder="请输入商品名称" />
		            </uni-forms-item>
		            <uni-forms-item label="员工姓名" required name="staffName">
			            <uni-easyinput :inputBorder="false" v-model="dataForm.staffName" type="text" placeholder="请输入员工姓名" />
		            </uni-forms-item>
		            <uni-forms-item label="租借人姓名" required name="leaseName">
			            <uni-easyinput :inputBorder="false" v-model="dataForm.leaseName" type="text" placeholder="请输入租借人姓名" />
		            </uni-forms-item>
		            <uni-forms-item label="租借人手机号" required name="leasePhone">
			            <uni-easyinput :inputBorder="false" v-model="dataForm.leasePhone" type="number" placeholder="请输入租借人手机号" />
		            </uni-forms-item>
		            <uni-forms-item label="押金(元)" required name="deposit">
			            <uni-easyinput :inputBorder="false" v-model="dataForm.deposit" type="number" placeholder="请输入押金" />
		            </uni-forms-item>
		            <uni-forms-item label="借出时间" required name="leaseTime">
			            <view class="tui-flex" @click="DatePicker('datetime')">
				            <uni-easyinput :inputBorder="false" v-model="dataForm.leaseTime" type="text" placeholder="请选择" />
				            <uni-icons type="arrowdown" size="40" color="#999"></uni-icons>
			            </view>
		            </uni-forms-item>
		            <uni-forms-item label="备注" name="remark">
			            <uni-easyinput :inputBorder="false" v-model="dataForm.remark" type="text" placeholder="备注" />
		            </uni-forms-item>
		            <view class="ui-btn">
			            <button class="btn" @click="submitForm">添加</button>
		            </view>
	            </uni-forms>

	            <uni-forms v-if="loginWay == 1" labelWidth="210">
		            <uni-forms-item label="备注">
			            <uni-easyinput :inputBorder="false" v-model="remark" type="text" placeholder="备注" />
		            </uni-forms-item>
		            <view class="ui-btn" v-if="addShow">
			            <button class="btn" @click="returnForm">选择归还物品</button>
		            </view>
	            </uni-forms>
            </view>
            <view style="margin: 40rpx 30rpx;" v-if="list.length && loginWay == 0">
                <view>
                    租借申请记录(可继续添加,点击完成提交):
                </view>
                <view class="ui-list" v-for="(item, index) in list" :key="index">
                    <view style="text-align: right;" @tap="delGet(item)">
                        <uni-icons type="trash" size="40" color="#999"></uni-icons>
                    </view>
                    <view class="tui-flex">
                        <view class="form-title">商家名称: </view>
                        <text class="int-flex">{{item.businName}}</text>
                    </view>
                    <view class="tui-flex">
                        <view class="form-title">商品名称:</view>
                        <text class="int-flex">{{item.productName}}</text>
                    </view>
                    <view class="tui-flex">
                        <view class="form-title">员工姓名: </view>
                        <text class="int-flex">{{item.staffName}}</text>
                    </view>
                    <view class="tui-flex">
                        <view class="form-title">租借人姓名: </view>
                        <text class="int-flex">{{item.leaseName}}</text>
                    </view>
                    <view class="tui-flex">
                        <view class="form-title">租借人手机号: </view>
                        <text class="int-flex">{{item.leasePhone}}</text>
                    </view>
                    <view class="tui-flex">
                        <view class="form-title">押金: </view>
                        <text class="int-flex" style="color: red">￥ {{item.deposit}}</text>
                    </view>
                    <view class="tui-flex">
                        <view class="form-title">借出时间: </view>
                        <text class="int-flex">{{item.leaseTime}}</text>
                    </view>
                    <view class="tui-flex">
                        <view class="form-title">备注: </view>
                        <text class="int-flex">{{item.remark}}</text>
                    </view>
                </view>
            </view>

	        <view v-if="loginWay == 1 && showTop" style="padding-top: 80rpx">
		        <view v-for="(item, index) in dataList" :key="index" class="order-item">
			        <view class="ui-data">
				        <view class="tui-flex">
					        <view class="form-title">商家名称: </view>
					        <text class="int-flex">{{item.businName}}</text>
				        </view>
				        <view class="tui-flex">
					        <view class="form-title">商品名称:</view>
					        <text class="int-flex">{{item.productName}}</text>
				        </view>
				        <view class="tui-flex">
					        <view class="form-title">员工姓名: </view>
					        <text class="int-flex">{{item.staffName}}</text>
				        </view>
				        <view class="tui-flex">
					        <view class="form-title">租借人姓名: </view>
					        <text class="int-flex">{{item.leaseName}}</text>
				        </view>
				        <view class="tui-flex">
					        <view class="form-title">租借人手机号: </view>
					        <text class="int-flex">{{item.leasePhone}}</text>
				        </view>
				        <view class="tui-flex">
					        <view class="form-title">押金: </view>
					        <text class="int-flex" style="color: red">￥ {{item.deposit}}</text>
				        </view>
				        <view class="tui-flex">
					        <view class="form-title">借出时间: </view>
					        <text class="int-flex">{{item.leaseTime}}</text>
				        </view>
				        <view class="tui-flex">
					        <view class="form-title">备注: </view>
					        <text class="int-flex">{{item.remark}}</text>
				        </view>
			        </view>
			        <view class="flex-icon" v-if="showTop" @tap="showCheck(item, index)">
				        <uni-icons type="checkbox-filled" size="46" :color="item.selected ? '#6CB041':'#999'"></uni-icons>
			        </view>
		        </view>
	        </view>

	        <view v-if="loginWay == 1 && !showTop" v-for="(item, index) in selectList" :key="index" class="order-item">
		        <view class="ui-data" style="width: 100%">
			        <view class="tui-flex">
				        <view class="form-title">商家名称: </view>
				        <text class="int-flex">{{item.businName}}</text>
			        </view>
			        <view class="tui-flex">
				        <view class="form-title">商品名称:</view>
				        <text class="int-flex">{{item.productName}}</text>
			        </view>
			        <view class="tui-flex">
				        <view class="form-title">员工姓名: </view>
				        <text class="int-flex">{{item.staffName}}</text>
			        </view>
			        <view class="tui-flex">
				        <view class="form-title">租借人姓名: </view>
				        <text class="int-flex">{{item.leaseName}}</text>
			        </view>
			        <view class="tui-flex">
				        <view class="form-title">租借人手机号: </view>
				        <text class="int-flex">{{item.leasePhone}}</text>
			        </view>
			        <view class="tui-flex">
				        <view class="form-title">押金: </view>
				        <text class="int-flex" style="color: red">￥ {{item.deposit}}</text>
			        </view>
			        <view class="tui-flex">
				        <view class="form-title">借出时间: </view>
				        <text class="int-flex">{{item.leaseTime}}</text>
			        </view>
			        <view class="tui-flex">
				        <view class="form-title">备注: </view>
				        <text class="int-flex">{{item.remark}}</text>
			        </view>
		        </view>
	        </view>
        </view>


	    <mx-date-picker :show="showPicker" :type="type" :show-tips="true" :show-seconds="true" @confirm="ed" @cancel="ed" />

        <pay-btn v-if="showList" btnShow btnText="提交申请记录" @separateTo="separateTo"></pay-btn>
	    <pay-btn v-if="showTop" btnShow btnText="确定" @separateTo="determineTo"></pay-btn>
	    <pay-btn v-if="routerShow && loginWay == 1" btnShow btnText="提交归还" @separateTo="submitGet"></pay-btn>

	    <!-- 登录提示 -->
	    <uni-login-model></uni-login-model>
    </view>
</template>
<script>
    import { mapMutations, mapActions, mapState } from 'vuex'
    import payBtn from '@/components/payBtn/index'
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import MxDatePicker from '@/components/mx-datepicker/mx-datepicker'
    import uniForms from '@/components/bjx-form/uni-forms.vue'
    import uniFormsItem from '@/components/bjx-form/uni-forms-item.vue'
    import uniEasyinput from '@/components/bjx-form/uni-easyinput.vue'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
    import mSearch  from '../ticket/components/mehaotian-search.vue'

    export default {
        components: {
            payBtn, uniIcons, MxDatePicker, uniForms, uniFormsItem, uniEasyinput, uniLoginModel, mSearch
        },
        data() {
            return{
                dataForm: {
                    businName: '',
                    productName: '',
                    staffName: '',
                    leaseName: '',
                    deposit: '',
                    leasePhone: '',
                    remark: '',
                    leaseTime: '',
                    billNo: ''
                },
                list: [],
                rightText: '记录',
                showList: false,
                showPicker: false,
                datetime: '2019-01-01 15:00:12',
                type: 'datetime',
                loginWay: 0,
                rules: {
	                businName: { rules: [{ required: true, errorMessage: '请输入商家名称' }] },
	                productName: { rules: [{ required: true, errorMessage: '请输入商品名称' }] },
                    staffName: { rules: [{ required: true, errorMessage: '请输入员工姓名' }] },
                    leaseName: { rules: [{ required: true, errorMessage: '请输入租借人姓名' }] },
                    leasePhone: { rules: [{ required: true, errorMessage: '请输入租借人手机号' }] },
                    deposit: { rules: [{ required: true, errorMessage: '押金不能为空' }] },
                    leaseTime: { rules: [{ required: true, errorMessage: '借出时间不能为空' }] }
                },
                listQuery: {
                    pageNum: 1,
                    pageSize: 10,
                    isReturn: 0,
                    leasePhone: ''
                },
                dataList: [],
                showTop: false,
                routerShow: false,
                addShow: true,
                selectList: [],
                remark: '',
                pid: ''
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
        onLoad(options) {
            this.loginWay = options.loginWay
            this.pid = options.pid
            this.dataForm.billNo = options.billNo
        },
        onShow () {
        },
        onReady() {
            // 需要在onReady中设置规则
            // this.$refs.form.setRules(this.rules)
        },
        methods: {
            submitForm() {
                var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/
                if(!myreg.test(this.dataForm.leasePhone)){
                    uni.showModal({ content: '手机号格式不正确', showCancel: false });
                    return;
                }
                this.$refs.form.submit().then((res)=>{
                    this.rightText = '完成'
                    this.list.push(Object.assign({}, this.dataForm))
                    this.dataForm = {
                        businName: '',
                        productName: '',
                        staffName: '',
                        leaseName: '',
                        deposit: '',
                        leasePhone: '',
                        remark: '',
                        leaseTime: ''
                    }
                }).catch(error => {
                    console.log('表单错误信息：', error)
                })
            },
            //  添加归还
            returnForm() {
                this.dataList = []
                this.$api.api('lease.page', this.listQuery).then(res => {
                    if (res.code == 200) {
                        this.showTop = true
                        this.routerShow = false
                        this.rightText = '取消'
                        var data = res.data.list
                        for (var i in data) {
                            data[i]['selected'] = false
                            this.dataList.push(data[i]);
                        }
                        if (this.listQuery.pageNum == res.data.totalPage) {
                            uni.hideNavigationBarLoading();//关闭加载动画
                            uni.stopPullDownRefresh();//得到数据后停止下拉刷新
                            return
                        }
                        this.listQuery.pageNum++
                        uni.hideNavigationBarLoading();
                    } else {
                        uni.showToast({title: res.message, icon: 'none'})
                    }
                }).catch(error => {
                })
            },
            search(e, val) {
                console.log(e,val)
                this.listQuery.pageNum = 1
                this.listQuery.leasePhone = e;
                this.returnForm()
            },
            //  确定归还数据
            determineTo() {
                if(this.selectList.length == 0) {
                    uni.showModal({
                        showCancel: false,
                        content: '请选择要归还的数据。',
                        success: function (res) {
                            if (res.confirm) {
                                console.log('用户点击确定');
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                    return
                }
                this.showTop = false
                this.routerShow = true
                this.addShow = false
                this.rightText = '记录'
            },
            //  提交归还数据
            submitGet() {
                let form = {
                    lease: this.selectList,
                    remark: this.remark
                }
                uni.showLoading({title: ''})
                this.$api.api('lease.retu', form).then(res => {
                    if (res.code == 200) {
                        this.selectList = []
                        this.addShow = true
                        this.routerShow = false
                        uni.showToast({title: '提交成功'})
                        uni.hideLoading();
                    } else {
                        uni.hideLoading();
                        uni.showToast({title: res.message, icon: 'none'})
                    }
                }).catch(error => {
                    uni.showToast({title: error.message, icon: 'none'})
                })
            },
            //  提交租借表单
            separateTo() {
                uni.showLoading({title: ''})
                this.$api.api('lease.create', this.list).then(res => {
                    if (res.code == 200) {
                        this.list = []
                        this.showList = false
                        uni.hideLoading();
                        uni.showToast({title: '提交成功'})
                    } else {
                        uni.hideLoading();
                        uni.showToast({title: res.message, icon: 'none'})
                    }
                }).catch(error => {
                    uni.showToast({title: error.message, icon: 'none'})
                })
            },
            //  删除列表
            delGet(item) {
                const index = this.list.indexOf(item)
                this.list.splice(index, 1)
                if (this.list.length == 0) {
                    this.showList = false
                    this.rightText = '记录'
                }
            },
            //  单选框
            showCheck(item, index) {
                this.dataList[index].selected = !this.dataList[index].selected;
                console.log(this.dataList[index].selected)
                if (this.dataList[index].selected == true) {
                    this.dataList[index]['operatorName'] = this.userInfo.staffName
                    this.dataList[index]['operatorPhone'] = this.userInfo.username
                    this.selectList.push(this.dataList[index])
                    // this.selectList.push(item)
                } else if (this.dataList[index].selected == false) {
                    this.selectList.splice(this.selectList[index],1);
                }
            },
            DatePicker(type){//显示
                this.type = type;
                this.showPicker = true;
                this.value = this[type];
            },
            ed(e) {//选择
                this.showPicker = false;
                if(e) {
                    this[this.type] = e.value;
                    //选择的值
                    this.dataForm.leaseTime = e.value
                }
            },
            clickRight() {
                if (this.rightText == '记录') {
                    uni.navigateTo({
                        url: '/pagesA/coupons/leaseList?isStaff=0'
                    })
                } else if (this.rightText == '完成') {
                    this.showList = true
                    this.rightText = '记录'
                } else if (this.rightText == '取消') {
                    this.showTop = false
                    this.rightText = '记录'
                }

            },
            onLoginWay(flag) {
                this.loginWay = flag;
            },
        }
    }
</script>
<style lang="scss" scoped>
.ui-btn {
    margin: 60rpx 30rpx 50rpx;
    .btn {
        background-color: #fff;
        color: #6CB041;
        border: 2rpx solid #6CB041;
    }
}
.ui-list {
    background-color: #fff;
    margin-top: 30rpx;
    border-radius: 15rpx;
    padding: 30rpx;
    font-size: 34rpx;
    .form-title {
        width: 40%;
        color: #999;
        text-align: right;
        padding-right: 30rpx;
    }
    .int-flex {
        flex: 1;
    }
}
.ui-from {
    margin-top: 40rpx;
    background-color: #fff;
    padding: 0 30rpx 30rpx;
    .check-box {
        padding-top: 30rpx;
        .flex {
            font-size: 34rpx;
            .flex-title {
                width: 34%;
            }
            .tui-flex {
                flex: 1;
	            .flex-1 {
		            flex: 1;
	            }
	            .flex-2 {
		            flex: 1;
	            }
            }
        }
    }
}
.order-item {
	display: flex;
	align-items: center;
	margin: 40rpx 30rpx 0;
	.ui-data {
		background: #fff;
		width: 89%;
		border-radius: 15rpx;
		padding: 30rpx;
		font-size: 30rpx;
		.form-title {
			width: 37%;
			color: #999;
		}
	}
	.flex-icon {
		padding-left: 30rpx;
	}
}
</style>